.index-column-wrapper {
}

.index-column-content {
    padding: 30px 0;
}

.index-column-title {
    position: relative;
}

    .index-column-title i,
    .index-column-title span {
        display: block;
        text-align: center;
    }

    .index-column-title i {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: rgba(29, 131, 199, .15);
        font-size: 26px;
        font-weight: bold;
    }

    .index-column-title span {
        padding-top: 10px;
        font-size: 30px;
    }

.index-column-txt p {
    margin: 20px 0;
    color: #999;
    font-size: 14px;
    text-align: center;
}

.index-banner-wrapper {
    height: 700px;
}

    .index-banner-wrapper .swiper-container {
        padding: 30px 0;
    }

    .index-banner-wrapper .swiper-slide {
        width: 800px;
        height: 700px;
    }

        .index-banner-wrapper .swiper-slide i {
            display: block;
            height: 100%;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: auto 80%;
            transition: all .2s linear 0s;
        }

        .index-banner-wrapper .swiper-slide:hover i {
            transform: scale(1.1);
        }

.index-adv-wrapper a,
.index-adv-wrapper img {
    display: block;
    width: 100%;
}

.index-icon-wrapper {
    background: url('../images/index-icon-img.png') no-repeat center 130px;
}

.index-icon-list {
    margin: 30px auto 0;
    width: 980px;
}

.index-icon-item {
    display: block;
    float: left;
    position: relative;
    margin-left: 20px;
}

    .index-icon-item:first-child {
        margin-left: 0;
    }

    .index-icon-item .card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 160px;
        height: 210px;
        transform: translate(-50%, -50%);
        transform-style: preserve-3d;
        transition: all .5s ease;
        backface-visibility: hidden;
    }

        .index-icon-item .card .front,
        .index-icon-item .card .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .index-icon-item .card .back {
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }

    .index-icon-item .item {
        display: flex;
        height: 100%;
        align-items: center
    }

    .index-icon-item .front .item {
        background-color: #fff;
    }

    .index-icon-item .back .item {
        background-color: #1d83c7;
    }

    .index-icon-item .icon {
        width: 100%;
    }

        .index-icon-item .icon i,
        .index-icon-item .icon span {
            display: block;
        }

        .index-icon-item .icon i {
            height: 88px;
            background-position: center center;
            background-repeat: no-repeat;
        }

            .index-icon-item .icon i.i-1-1 {
                background-image: url('../images/index-icon-1-1.png');
            }

            .index-icon-item .icon i.i-1-2 {
                background-image: url('../images/index-icon-1-2.png');
            }

            .index-icon-item .icon i.i-2-1 {
                background-image: url('../images/index-icon-2-1.png');
            }

            .index-icon-item .icon i.i-2-2 {
                background-image: url('../images/index-icon-2-2.png');
            }

            .index-icon-item .icon i.i-3-1 {
                background-image: url('../images/index-icon-3-1.png');
            }

            .index-icon-item .icon i.i-3-2 {
                background-image: url('../images/index-icon-3-2.png');
            }

            .index-icon-item .icon i.i-4-1 {
                background-image: url('../images/index-icon-4-1.png');
            }

            .index-icon-item .icon i.i-4-2 {
                background-image: url('../images/index-icon-4-2.png');
            }

            .index-icon-item .icon i.i-5-1 {
                background-image: url('../images/index-icon-5-1.png');
            }

            .index-icon-item .icon i.i-5-2 {
                background-image: url('../images/index-icon-5-2.png');
            }

        .index-icon-item .icon span {
            font-size: 16px;
            text-align: center;
        }

    .index-icon-item .back .icon span {
        color: #fff;
    }

    .index-icon-item .polygon,
    .index-icon-item .border,
    .index-icon-item .box {
        width: 180px;
        height: 230px;
        overflow: hidden;
    }

    .index-icon-item .polygon {
        transform: rotate(120deg);
    }

    .index-icon-item .border {
        transform: rotate(-60deg);
    }

    .index-icon-item .box {
        position: relative;
        background-color: #1d83c7;
        transform: rotate(-60deg);
        transition: all .5s linear 0s;
    }

    .index-icon-item .polygon.block,
    .index-icon-item .polygon.block .border,
    .index-icon-item .polygon.block .box {
        width: 160px;
        height: 210px;
    }

        .index-icon-item .polygon.block .box {
            background-color: #fff;
        }

    .index-icon-item:hover .card {
        transform: translate(-50%, -50%) rotateY(180deg);
    }

    .index-icon-item:hover .box {
        background-color: #bfbfbf;
    }

    .index-icon-item:hover .polygon.block .box {
        background-color: #1d83c7;
    }

.index-card-list {
    margin-top: 30px;
    height: 700px;
    overflow: hidden;
}

.index-card-item {
    float: left;
    position: relative;
    width: 10%;
    height: 100%;
    transition: all .5s linear 0s;
    cursor: pointer;
    overflow: hidden;
}

    .index-card-item .image,
    .index-card-item .box {
        float: left;
        height: 100%;
        transition: all .5s linear 0s;
    }

    .index-card-item .image {
        width: 100%;
        background-position: 0 center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .index-card-item .title {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-color: rgba(30, 131, 199, .4);
        transition: all .5s linear 0s;
        opacity: 1;
    }

        .index-card-item .title span {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            color: #fff;
            font-size: 42px;
            text-align: center;
            transition: all .5s linear 0s;
            transform: translate(-50%, -50%);
        }

    .index-card-item .box {
        width: 0%;
        overflow: hidden;
    }

    .index-card-item .tit,
    .index-card-item .txt {
        float: left;
        height: 100%;
    }

    .index-card-item .tit {
        position: relative;
        border-right: 1px solid #ddd;
        opacity: 0;
    }

        .index-card-item .tit span {
            display: block;
            position: absolute;
            top: 50px;
            left: 50%;
            width: 50px;
            color: #222;
            font-size: 42px;
            text-align: center;
            transform: translateX(-50%);
        }

    .index-card-item .txt {
        position: relative;
        padding: 50px 30px 141px;
        width: 100%;
    }

        .index-card-item .txt p {
            margin-top: 30px;
            color: #666;
        }

            .index-card-item .txt p:first-child {
                margin-top: 0;
            }

        .index-card-item .txt a {
            display: flex;
            position: absolute;
            left: 30px;
            bottom: 50px;
            padding: 0 25px;
            height: 41px;
            border: 1px solid #1e83c7;
            color: #1e83c7;
            align-items: center;
            transition: all .1s linear 0s;
        }

            .index-card-item .txt a:hover {
                background-color: #1e83c7;
                color: #fff;
            }

    .index-card-item.hover {
        width: 50%;
    }

        .index-card-item.hover .image {
            width: 50%;
        }

        .index-card-item.hover .title {
            position: relative;
            height: 100%;
            opacity: 0;
        }

            .index-card-item.hover .title span {
                transform: translate(-50%, 50%);
            }

        .index-card-item.hover .box {
            width: 50%;
        }

        .index-card-item.hover .tit {
            width: 20%;
            opacity: 1;
        }

        .index-card-item.hover .txt {
            width: 80%;
        }

.index-category-list {
    position: relative;
    margin: 30px 0;
    height: 915px;
    overflow: hidden;
}

.index-category-item {
    display: block;
    position: absolute;
    width: 460px;
    height: 285px;
    border: 1px solid rgba(29, 131, 199, .15);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);
    overflow: hidden;
}

    .index-category-item:nth-child(1),
    .index-category-item:nth-child(7) {
        height: 600px;
    }

    .index-category-item:nth-child(1),
    .index-category-item:nth-child(2),
    .index-category-item:nth-child(3) {
        top: 0;
    }

    .index-category-item:nth-child(1),
    .index-category-item:nth-child(5) {
        left: 0;
    }

    .index-category-item:nth-child(2),
    .index-category-item:nth-child(4),
    .index-category-item:nth-child(6) {
        left: 490px;
    }

    .index-category-item:nth-child(4),
    .index-category-item:nth-child(7) {
        top: 315px;
    }

    .index-category-item:nth-child(5),
    .index-category-item:nth-child(6) {
        top: 630px;
    }

    .index-category-item:nth-child(3),
    .index-category-item:nth-child(7) {
        right: 0;
    }

    .index-category-item .image {
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .index-category-item .title {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .3);
        justify-content: center;
        align-items: center;
        transition: all .3s linear 0s;
        opacity: 0;
    }

        .index-category-item .title span {
            color: #fff;
            font-size: 32px;
        }

    .index-category-item:hover .title {
        top: 0;
        opacity: 1;
    }

.index-skill-wrapper {
    background: #c6e0f1 url('../images/index-skill-img.jpg') no-repeat center center;
    overflow: hidden;
}

.index-skill-block {
    margin: 30px auto;
    width: 1100px;
}

.index-skill-image,
.index-skill-txt {
    float: left;
    background-color: #fff;
    border: 1px solid rgba(29, 131, 199, .15);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);
}

.index-skill-image {
    position: relative;
    width: 600px;
    height: 420px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: all .3s linear 0s;
    z-index: 1;
}

    .index-skill-image.ani {
        opacity: 1;
    }

.index-skill-txt {
    position: relative;
    margin: 30px 0;
    padding: 30px 30px 101px;
    background-color: rgba(255, 255, 255, .6);
    width: 500px;
    height: 350px;
    border-left: 0 none;
}

    .index-skill-txt .title {
        font-size: 26px;
    }

    .index-skill-txt .en {
        margin: 5px 0 15px;
        color: #999;
    }

    .index-skill-txt .txt {
        color: #666;
    }

        .index-skill-txt .txt p {
            line-height: 23px;
        }

    .index-skill-txt .btn, .index-company-txt .btn {
        display: flex;
        position: absolute;
        right: 30px;
        bottom: 30px;
        padding: 0 25px;
        height: 41px;
        border: 1px solid #1e83c7;
        color: #1e83c7;
        align-items: center;
        transition: all .1s linear 0s;
    }

        .index-skill-txt .btn:hover, .index-company-txt .btn:hover {
            background-color: #1e83c7;
            color: #fff;
        }


.index-company-wrapper {
    overflow: hidden;
}

.index-company-block {
    margin: 30px auto;
    width: 1100px;
}

.index-company-box {
    position: relative;
}

.index-company-image,
.index-company-txt {
    background-color: #fff;
}

.index-company-image {
    width: 650px;
    height: 420px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2);
}

.index-company-txt {
    position: absolute;
    top: 60px;
    right: 0;
    padding: 30px;
    width: 550px;
    height: 420px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    z-index: 1;
}

    .index-company-txt .title {
        font-size: 26px;
    }

    .index-company-txt .txt {
        margin-top: 15px;
        color: #666;
    }

        .index-company-txt .txt p {
            line-height: 25px;
        }

.index-company-data {
    margin: 120px 0 30px;
}

.index-company-item {
    display: flex;
    float: left;
    margin-left: 44px;
    padding-left: 10px;
    width: 242px;
    height: 247px;
    background: url('../images/index-company-icon.png') no-repeat center center;
    align-items: center;
}

    .index-company-item:first-child {
        margin-left: 0;
    }

    .index-company-item .box {
        width: 100%;
    }

    .index-company-item .number,
    .index-company-item .name {
        text-align: center;
    }

        .index-company-item .number div {
            display: inline-block;
            position: relative;
            color: #1d83c7;
        }

        .index-company-item .number span {
            font-size: 32px;
        }

        .index-company-item .number i {
            font-size: 22px;
        }

    .index-company-item .name {
        margin-top: 10px;
        font-size: 16px;
    }

.index-why-wrapper {
    background-color: #fbfafa;
}

.index-column-block {
    margin: 30px 0;
}

.index-why-tab {
    display: flex;
}

    .index-why-tab a {
        display: flex;
        margin-left: 10px;
        border: 1px solid #ddd;
        flex-direction: column;
        flex: 1;
        transition: all .1s linear 0s;
    }

        .index-why-tab a:first-child {
            margin-left: 0;
        }

        .index-why-tab a div {
            height: 80px;
            padding-top: 15px;
        }

        .index-why-tab a i,
        .index-why-tab a span {
            display: block;
            text-align: center;
            transition: all .1s linear 0s;
        }

        .index-why-tab a i {
            margin: 0 auto;
            width: 30px;
            height: 2px;
            background-color: #ddd;
        }

        .index-why-tab a span {
            margin-top: 20px;
            color: #666;
        }

        .index-why-tab a:hover {
            border-color: #84cfff;
            font-size: 16px;
            transition: all .5s ease 0s;
        }



            .index-why-tab a:hover i {
                background-color: #84cfff;
                height: 4px;
                width: 100px;
                transition: all .5s ease 0s;
            }

            .index-why-tab a:hover span {
                color: #84cfff;
            }

        .index-why-tab a.active {
            background-color: #84cfff;
            border-color: #84cfff;
        }

            .index-why-tab a.active i {
                background-color: #fff;
            }

            .index-why-tab a.active span {
                color: #fff;
            }

.index-why-content {
    margin-top: 30px;
}

.index-why-box {
    display: none;
}

    .index-why-box.active {
        display: block;
    }

.index-why-box {
    padding: 0 50px;
    overflow: hidden;
}

.index-why-txt,
.index-why-image {
    float: left;
}

.index-why-txt {
    margin: 50px 0;
    padding: 30px;
    width: 450px;
    height: 300px;
    background-color: #84cfff;
}

    .index-why-txt .title,
    .index-why-txt .txt {
        color: #fff;
    }

    .index-why-txt .title {
        margin-bottom: 15px;
        font-size: 26px;
    }

    .index-why-txt .txt p {
        margin-top: 10px;
        line-height: 24px;
    }

.index-why-image {
    width: 890px;
    height: 400px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.index-news-block {
    margin-top: 30px;
}

.index-news-hot {
    overflow: hidden;
}

    .index-news-hot .item {
        display: block;
        float: left;
        position: relative;
        margin-left: 20px;
        width: calc((100% - 40px) / 3);
        height: 260px;
        transition: all .1s linear 0s;
        overflow: hidden;
    }

        .index-news-hot .item:first-child {
            margin-left: 0;
        }

        .index-news-hot .item .image {
            height: 100%;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .index-news-hot .item .block {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
            opacity: 0;
            transition: all .1s linear 0s;
        }

        .index-news-hot .item .box {
            display: flex;
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            padding: 20px;
            border: 2px solid #fff;
            color: #fff;
            justify-content: center;
            align-items: center
        }

        .index-news-hot .item .title {
            font-size: 26px;
            text-align: center;
        }

        .index-news-hot .item .txt {
            margin-top: 10px;
            text-align: center;
        }

        .index-news-hot .item:hover .block,
        .index-news-hot .item.active .block {
            opacity: 1;
        }

.index-news-content {
    margin-top: 10px;
    overflow: hidden;
}

.index-news-list {
    display: none;
}

    .index-news-list.active {
        display: block;
    }

    .index-news-list .item {
        display: block;
        float: left;
        position: relative;
        margin-right: 20px;
        padding: 20px 0;
        width: calc((100% - 40px) / 3);
        border-bottom: 1px dashed #ddd;
        transition: all .1s linear 0s;
        overflow: hidden;
    }

        .index-news-list .item:nth-child(3n) {
            margin-right: 0;
        }

        .index-news-list .item .date,
        .index-news-list .item .block {
            float: left;
            height: 65px;
        }

        .index-news-list .item .date {
            padding: 10px 0;
            width: 80px;
        }

            .index-news-list .item .date span {
                display: block;
                color: #666;
                text-align: center;
            }

                .index-news-list .item .date span:nth-child(1) {
                    height: 25px;
                    font-size: 20px;
                }

                .index-news-list .item .date span:nth-child(2) {
                    height: 20px;
                    color: #555;
                }

        .index-news-list .item .block {
            padding-left: 10px;
            width: calc(100% - 80px);
        }

            .index-news-list .item .block .title {
                height: 25px;
                font-size: 16px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .index-news-list .item .block .txt {
                display: -webkit-box;
                height: 40px;
                line-height: 22px;
                color: #666;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }